<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {% block title %}
        <title>用户登陆</title>
    {% endblock %}
    <link rel="stylesheet" href="/static/my/css/reset.css">
    <link rel="stylesheet" href="/static/my/css/login.css">
    <link rel="shortcut icon" href="#"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/static/elementui/theme-chalk/index.css">


</head>
<body>
<div id="app">
    <main>
        <div class="top">
            <div class="title">

                {% block main_title %}
                    <a href="/login" class="active">登陆</a>
                    /
                    <a href="/register">注册</a>
                {% endblock %}

            </div>
            <div class="login_forms">
                {% csrf_token %}
                {% block form %}

                    <input type="text" ref="login_form_name" placeholder="输入用户名" v-model="login_form.name">
                    <input type="password" ref="login_form_pwd" placeholder="请输入密码" v-model="login_form.pwd">
                    <div class="code">
                        <input type="text" ref="login_form_code" placeholder="请输入验证码" v-model="login_form.code">
                        <img @click="get_random_code" src="/static/my/img/login/code.png" alt="">
                    </div>
                    <button @click=login> 登陆</button>
                {% endblock %}

            </div>

        </div>
        <div class="bottom">
            <img src="/static/my/img/login/undraw_react_re_g3ui.svg" alt="">
        </div>
    </main>
</div>

<script src="/static/axios/axios.min.js"></script>
<script src="/static/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="/static/elementui/index.js"></script>

<script>
    axios.interceptors.request.use(request => {
        if (request.method === 'post') {
            let csrftoken = document.querySelector('input[name="csrfmiddlewaretoken"]').value

            request.headers['X-CSRFToken'] = csrftoken
        }
        return request
    })
    axios.interceptors.response.use(
        response => {
            return response.data
        }
    )

    new Vue({
        el: '#app',
        data: {
            names: '123',
            login_form: {
                name: '',
                pwd: '',
                code: '',
            },
            register_form: {
                name: '',
                pwd: '',
                re_pwd: '',
                code: '',
            },

        },
        methods: {
            login() {
                axios.post('/api/login/', this.login_form).then(res => {


                    if (res.code) {
                        //验证失败
                        this.$message.error(res.msg)
                        this.$refs[`login_form_${res.self}`].focus()
                        return
                    }
                    this.$message.success(res.msg)
                    setTimeout(() => {
                        location.href = '/'
                    }, 1000)
                })


            },
            register() {
                axios.post('/api/register/', this.register_form).then(res => {


                    if (res.code) {
                        //验证失败
                        this.$message.error(res.msg)
                        this.$refs[`register_form_${res.self}`].focus()
                        return
                    }
                    this.$message.success(res.msg)
                    setTimeout(() => {
                        location.href = '/'
                    }, 1000)
                })
            },
            get_random_code(e) {
                let date = new Date().getTime();
                e.target.src = '/login/random_code/?timestamp=' + date
            },
        }

    })
</script>
</body>
</html>